<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OTA 服务管理系统</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@6.2.0/css/all.min.css">
</head>
<body>
    <!-- 登录页面 -->
    <div id="login-page" class="page">
        <div class="login-container">
            <h2>OTA 服务管理系统</h2>
            <div class="login-form">
                <div class="mb-3">
                    <label for="username" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control" id="password" placeholder="请输入密码">
                </div>
                <button id="login-btn" class="btn btn-primary w-100">登录</button>
            </div>
        </div>
    </div>

    <!-- 主页面 -->
    <div id="main-page" class="page d-none">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">OTA 服务管理系统</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" href="#" id="products-link">产品管理</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#" id="logout-btn">退出登录</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="content-container">
            <!-- 产品列表页面 -->
            <div id="products-page" class="container">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2>产品系列管理</h2>
                    <div>
                        <div class="input-group">
                            <input type="text" class="form-control" id="product-search" placeholder="搜索产品...">
                            <button class="btn btn-outline-secondary" id="search-btn" type="button">搜索</button>
                        </div>
                    </div>
                    <button id="add-product-btn" class="btn btn-primary">添加产品系列</button>
                </div>
                
                <div class="row row-cols-1 row-cols-md-3 g-4" id="product-list">
                    <!-- 产品列表将通过JavaScript动态生成 -->
                </div>
            </div>

            <!-- 产品详情页面 -->
            <div id="product-detail-page" class="container d-none">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 id="product-series-name">产品系列名称</h2>
                    <button id="back-to-products" class="btn btn-secondary">返回产品列表</button>
                    <button id="add-model-btn" class="btn btn-primary">添加产品型号</button>
                </div>
                
                <div class="product-info mb-4">
                    <p id="product-description">产品描述</p>
                </div>
                
                <h3>产品型号列表</h3>
                <div class="row row-cols-1 row-cols-md-3 g-4" id="model-list">
                    <!-- 产品型号列表将通过JavaScript动态生成 -->
                </div>
            </div>

            <!-- 固件管理页面 -->
            <div id="firmware-page" class="container d-none">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 id="model-name">产品型号名称</h2>
                    <button id="back-to-product-detail" class="btn btn-secondary">返回产品详情</button>
                    <button id="add-firmware-btn" class="btn btn-primary">添加固件</button>
                </div>
                
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>升级包名称</th>
                            <th>版本号</th>
                            <th>硬件名称</th>
                            <th>扩展名称</th>
                            <th>MD5</th>
                            <th>上传日期</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="firmware-list">
                        <!-- 固件列表将通过JavaScript动态生成 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 添加产品系列模态框 -->
    <div class="modal fade" id="add-product-modal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加产品系列</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="add-product-form">
                        <div class="mb-3">
                            <label for="product-name" class="form-label">产品系列名称</label>
                            <input type="text" class="form-control" id="product-name" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">产品图片（三视图）</label>
                            <div class="row">
                                <div class="col-md-4">
                                    <label>正视图</label>
                                    <input type="file" class="form-control" id="front-image" accept="image/*">
                                    <div class="image-preview" id="front-image-preview"></div>
                                </div>
                                <div class="col-md-4">
                                    <label>左视图</label>
                                    <input type="file" class="form-control" id="left-image" accept="image/*">
                                    <div class="image-preview" id="left-image-preview"></div>
                                </div>
                                <div class="col-md-4">
                                    <label>俯视图</label>
                                    <input type="file" class="form-control" id="top-image" accept="image/*">
                                    <div class="image-preview" id="top-image-preview"></div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="product-description" class="form-label">产品描述</label>
                            <textarea class="form-control" id="product-description" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="save-product-btn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加产品型号模态框 -->
    <div class="modal fade" id="add-model-modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加产品型号</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="add-model-form">
                        <div class="mb-3">
                            <label for="model-id" class="form-label">产品型号</label>
                            <input type="text" class="form-control" id="model-id" required>
                            <small class="form-text text-muted">产品型号是唯一标识符</small>
                        </div>
                        <div class="mb-3">
                            <label for="model-image" class="form-label">产品图片</label>
                            <input type="file" class="form-control" id="model-image" accept="image/*">
                            <div class="image-preview" id="model-image-preview"></div>
                        </div>
                        <div class="mb-3">
                            <label for="model-info" class="form-label">产品信息</label>
                            <textarea class="form-control" id="model-info" rows="3"></textarea>
                            <small class="form-text text-muted">包括产品配置、基本功能等</small>
                        </div>
                        <div class="mb-3">
                            <label for="release-date" class="form-label">发布日期</label>
                            <input type="date" class="form-control" id="release-date">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="save-model-btn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加固件模态框 -->
    <div class="modal fade" id="add-firmware-modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加固件</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="add-firmware-form">
                        <div class="mb-3">
                            <label for="firmware-name" class="form-label">升级包名称</label>
                            <input type="text" class="form-control" id="firmware-name" required>
                            <small class="form-text text-muted">简单描述升级包，例如：客户A升级包、俄语特别版</small>
                        </div>
                        <div class="mb-3">
                            <label for="firmware-version" class="form-label">升级包版本</label>
                            <input type="text" class="form-control" id="firmware-version" required>
                        </div>
                        <div class="mb-3">
                            <label for="hardware-name" class="form-label">硬件名称</label>
                            <input type="text" class="form-control" id="hardware-name" required>
                            <small class="form-text text-muted">标识硬件方案和方案商</small>
                        </div>
                        <div class="mb-3">
                            <label for="extension-name" class="form-label">扩展名称</label>
                            <input type="text" class="form-control" id="extension-name">
                            <small class="form-text text-muted">用于区分不同OEM版本</small>
                        </div>
                        <div class="mb-3">
                            <label for="firmware-file" class="form-label">上传固件</label>
                            <input type="file" class="form-control" id="firmware-file" required>
                            <small id="md5-value" class="form-text text-muted">MD5将在上传后自动计算</small>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="save-firmware-btn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 右键菜单 -->
    <div class="context-menu" id="context-menu">
        <ul>
            <li id="add-firmware-context"><i class="fas fa-plus"></i> 添加固件</li>
            <li id="edit-product-context"><i class="fas fa-edit"></i> 编辑产品</li>
            <li id="delete-product-context"><i class="fas fa-trash"></i> 删除产品</li>
        </ul>
    </div>

    <footer>
        <p>&copy; 2023 OTA 服务管理系统</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/spark-md5@3.0.2/spark-md5.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
